<template>
  <div class="app-container">
    <el-row :gutter="20">
      <!--部门数据-->
      <el-col :span="4" :xs="24">
        <div class="head-container">
          <customDeptTree @clickDeptNode="clickDeptNode" :show-search-input="true"/>
        </div>
      </el-col>
      <!--条件查询-->
      <el-col :span="20" :xs="24">
        <el-row :gutter="10" style="margin-left:10px;margin-bottom: 5px">
          <span style="font-weight: bold">{{ selectDeptName }}</span>
          <span v-if="companyMobile!==''" style="margin-left: 10px" class="balanceText">关联企业账号
              <el-tag>{{ companyMobile }}</el-tag>
          </span>
          <span class="balanceText" style="margin-left: 10px">设备总数：</span>
          <span class="balanceValue">{{ total }}个</span>
        </el-row>

        <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="68px" @submit.native.prevent>
          <el-form-item label="序列号" prop="deviceSerial">
            <el-input v-model="queryParams.deviceSerial" placeholder="请输入序列号" clearable size="small"
                      @keyup.enter.native="handleQuery"
            />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery"
                       @keyup.enter.native="getList"
            >搜索
            </el-button>
            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-form>
        <el-row :gutter="10" class="mb8">
          <!--          <el-col :span="1.5">-->
          <!--            <el-button type="warning" icon="el-icon-download" size="mini" @click="handleExport"-->
          <!--                       v-hasPermi="['smart:group:export']">导出-->
          <!--            </el-button>-->
          <!--          </el-col>-->
          <el-table v-loading="loading" :data="ezDeviceList" border>
            <el-table-column label="设备序列号" align="center" prop="deviceSerial" :show-overflow-tooltip="true"/>
            <el-table-column label="设备名称" align="center" prop="deviceName" :show-overflow-tooltip="true"/>
            <el-table-column label="设备型号" align="center" prop="deviceType" :show-overflow-tooltip="true"/>
            <el-table-column label="在线状态" align="center" prop="status" width="100">
              <template slot-scope="scope">
                <template v-if="scope.row.status">
                  <div class="myTagOpen">在线</div>
                </template>
                <template v-else>
                  <div class="myTagClose">离线</div>
                </template>
              </template>

            </el-table-column>
            <el-table-column label="设备版本号" align="center" prop="deviceVersion" :show-overflow-tooltip="true"/>
            <el-table-column label="创建时间" align="center" prop="addTime" :show-overflow-tooltip="true">
              <template slot-scope="scope">
                <span>{{ parseTime(scope.row.addTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
              </template>
            </el-table-column>
            >
            <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="150">

              <template slot-scope="scope">
                <el-button size="mini" type="text" icon="el-icon-view" @click="handleDetails(scope.row)"
                           v-hasPermi="['ezviz:device:detail']"
                >详情
                </el-button>
                <el-button
                  v-if="scope.row.userId !== 1"
                  size="mini"
                  type="text"
                  icon="el-icon-delete"
                  @click="handleDelete(scope.row)"
                  v-hasPermi="['ezviz:device:remove']"
                >删除
                </el-button>
              </template>

            </el-table-column>
          </el-table>
          <pagination
            v-show="total>0"
            :total="total"
            :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize"
            @pagination="getList"
          />
        </el-row>
      </el-col>
    </el-row>


    <el-dialog :title="title" :visible.sync="open" width="700px" append-to-body>
      <el-descriptions :column=2 contentClassName="my-content" labelClassName="my-label">
        <el-descriptions-item label="设备序列号">{{ form.deviceSerial }}</el-descriptions-item>
        <el-descriptions-item label="设备名称">{{ form.deviceName }}</el-descriptions-item>
        <el-descriptions-item label="设备型号">{{ form.model }}</el-descriptions-item>
        <el-descriptions-item label="设备状态">
          <template v-if="form.status=='1'">
            <el-tag style="margin-top: -15px">在线</el-tag>
          </template>
          <template v-else>
            <el-tag style="margin-top: -15px" type="info">离线</el-tag>
          </template>
        </el-descriptions-item>
        <el-descriptions-item label="告警声音">
          <template v-if="form.alarmSoundMode=='0'">
            <el-tag style="margin-top: -15px" type="warning">短叫</el-tag>
          </template>
          <template v-else-if="form.alarmSoundMode=='1'">
            <el-tag style="margin-top: -15px" type="danger">长叫</el-tag>
          </template>
          <template v-else>
            <el-tag style="margin-top: -15px">静音</el-tag>
          </template>
        </el-descriptions-item>
        <el-descriptions-item label="下线通知">
          <template v-if="form.offlineNotify=='0'">
            <el-tag style="margin-top: -15px">不通知</el-tag>
          </template>
          <template v-if="form.alarmSoundMode=='1'">
            <el-tag style="margin-top: -15px">通知</el-tag>
          </template>
        </el-descriptions-item>
        <el-descriptions-item label="网络类型">
          <template v-if="form.netType=='wire'">
            <el-tag style="margin-top: -15px">有线</el-tag>
          </template>
          <template v-else>
            <el-tag style="margin-top: -15px">无线</el-tag>
          </template>
        </el-descriptions-item>
        <el-descriptions-item label="创建时间">
          <template>
            <span>{{ parseTime(addTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
          </template>
        </el-descriptions-item>
        <el-descriptions-item label="修改时间">
          <template>
            <span>{{ parseTime(updateTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
          </template>
        </el-descriptions-item>
      </el-descriptions>
      <el-divider/>
      <div slot="footer" class="dialog-footer">
        <el-button @click="open = false">关 闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  listEzDevice,
  deviceInfo,
  removeDevice,
  exportGroup, getEzThirdData
} from '@/api/system/ezviz'
import {parseTime} from '@/utils/ruoyi'

export default {
  name: 'ezviz',
  data() {
    return {
      // 遮罩层
      loading: true,
      // 选中数组
      deviceSerial: undefined,
      selectDeptId: undefined,
      selectDeptName: undefined,
      companyMobile: '',
      orgCode: undefined,
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 总条数
      total: 0,
      // 【请填写功能名称】表格数据
      ezDeviceList: [],
      // 弹出层标题
      title: '',
      // 是否显示弹出层
      open: false,
      addTime: 0,
      updateTime: 0,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        deviceSerial: undefined,
        gatewayMac: undefined,
        homeId: undefined,
        name: undefined,
        type: undefined,
        code: undefined,
        action: undefined,
        updateTime: undefined,
        addTime: undefined
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        homeId: [
          {required: true, message: '家庭ID不能为空', trigger: 'blur'}
        ],
        name: [
          {required: true, message: '群组名称不能为空', trigger: 'blur'}
        ],
        type: [
          {required: true, message: '群组类型不能为空', trigger: 'blur'}
        ],
        code: [
          {required: true, message: '群组编号不能为空', trigger: 'blur'}
        ]
      },
      relationDeviceData: []
    }
  },

  created() {
    this.getList()
  },
  methods: {
    parseTime,
    /** 查询【请填写功能名称】列表 */
    getList() {
      this.loading = true
      if (!this.queryParams.orgCode) {
        // 取出当前用户的组织ID
        this.queryParams.orgCode = this.$store.getters.orgCode
      }

      if (!this.selectDeptId) {
        this.selectDeptId = this.$store.getters.deptId
      }
      if (!this.selectDeptName) {
        this.selectDeptName = this.$store.getters.deptName
      }

      // 查询萤石设备列表
      listEzDevice(this.queryParams).then(response => {
        this.ezDeviceList = response.rows
        this.total = response.total
        this.loading = false
      })

      // 查询绑定的企业手机号
      getEzThirdData({deptId: this.selectDeptId}).then(response => {
        if (response.data.companyMobile) {
          this.companyMobile = response.data.companyMobile
        } else {
          this.companyMobile = ''
        }
      })
    },
    // 取消按钮
    cancel() {
      this.open = false
      this.reset()
    },
    // 表单重置
    reset() {
      this.form = {
        id: undefined,
        gatewayId: undefined,
        gatewayMac: undefined,
        homeId: undefined,
        name: undefined,
        type: undefined,
        code: undefined,
        action: undefined,
        addTime: undefined,
        updateTime: undefined
      }
      this.resetForm('form')
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.ezDeviceList = []
      this.queryParams.pageNum = 1
      this.total = 1
      this.reset()
      console.log("aa" + JSON.stringify(this.queryParams))
      if (!this.queryParams.deviceSerial) {
        this.getList()
      } else {
        deviceInfo(this.queryParams).then(response => {
          this.ezDeviceList.push(response.data)
        })
      }

    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm('queryForm')
      this.handleQuery()
    },

    /** 详情操作 */
    handleDetails(row) {
      this.reset()
      this.queryParams.deviceSerial = row.deviceSerial
      this.addTime = row.addTime
      this.updateTime = row.updateTime
      // console.log("row:" + JSON.stringify(row))
      deviceInfo(this.queryParams).then(response => {
        this.form = response.data
        this.open = true
        this.title = row.deviceName + '详情'
      })
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      this.deviceSerial = row.deviceSerial
      this.orgCode = this.queryParams.orgCode
      this.$confirm('是否确删除"' + row.deviceName + '"的数据项?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        return removeDevice({orgCode: this.orgCode, deviceSerial: this.deviceSerial})
      }).then(() => {
        this.getList()
        this.msgSuccess('删除成功')
      }).catch(function () {
      })
    },
    /** 导出按钮操作 */
    handleExport() {
      const queryParams = this.queryParams
      this.$confirm('是否确认导出?', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(function () {

        return exportGroup(queryParams)
      }).then(response => {
        this.download(response.msg)
      }).catch(function () {
      })
    },
    /**
     * 数字字符串每隔几位插入一个分隔符
     * @param str
     * @param length
     * @param separator
     * @returns {*}
     */
    strInsert(str, length, separator) {
      if (str == null) {
        return ''
      }
      let reg = new RegExp('\\d{1,' + length + '}', 'g')
      let ma = str.match(reg)
      return ma.join(separator)
    },
    clickDeptNode(value) {
      this.queryParams.orgCode = value.orgCode
      this.selectDeptName = value.label
      this.selectDeptId = value.id
      this.getList()
    }
  }
}
</script>
<style scoped>
/*余额文字样式*/
.balanceText {
  font-size: 16px;
  color: rgba(52, 60, 101, 0.5);
}

/*余额值样式*/
.balanceValue {
  font-size: 18px;
  font-family: 'PingFangSC-Semibold';
  color: #343c65
}
</style>
